<template>
  <el-dialog title="更新固件" :visible.sync="dialogFormVisible" width="500px">
    <el-form ref="dataForm" label-position="left" label-width="80px" style="margin: 0 30px">
      <template>
        <el-form-item label="上传固件">
          <el-upload
            class="upload-demo"
            action=""
            :on-change="handleChange"
            ref="upload"
            :auto-upload="false"
            :file-list="fileList"
          >
            <el-button type="primary" size="mini">点击选择</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="version" placeholder="请输入" />
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="saveData">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { update } from '@/api/attraction'
import { getToken } from '@/utils/auth'
export default {
  name: 'Firmware',

  data() {
    return {
      token: getToken(),
      dialogFormVisible: false,
      attraction_id: '',
      firmware_type: '',
      version: '',
      file: {},
      fileList: []
    }
  },

  created() {},
  methods: {
    handleOpen(attraction_id, firmware_type) {
      this.attraction_id = attraction_id
      this.firmware_type = firmware_type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    handleChange(file) {
      this.file = file
    },

    // 保存
    saveData() {
      if (!this.file.raw) {
        this.$message.error('请上传固件')
        return
      }
      if (!this.version) {
        this.$message.error('请输入版本号')
        return
      }
      const formData = new FormData()
      formData.append('file', this.file.raw)
      formData.append('version', this.version)
      formData.append('firmware_type', this.firmware_type)
      formData.append('attraction_id', this.attraction_id)
      console.log('this.file,', this.file)

      fetch(update, {
        method: 'POST',
        body: formData,
        headers: {
          token: this.token
        }
      })
        .then((response) => {
          console.log('response', response)
          this.$parent.$notify({
            title: '成功',
            message: `${
              this.firmware_type === 'main_board'
                ? '主控板'
                : this.firmware_type === 'bin_board'
                ? '仓板'
                : '讲解器'
            }固件更新成功`,
            type: 'success'
          })
          this.$parent.fetchData()
          this.dialogFormVisible = false
        })
        .catch((err) => {
          this.listLoading = false
          console.error('上传失败', err)
          this.$message.error('文件上传失败！')
        })
    }
  }
}
</script>
<style scoped lang="less">
.item-p {
  margin: 0;
  /* height: 1px; */
}
.time-slot {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 0;
    margin: 10px 0;
    display: flex;
    align-items: center;
    p {
      padding: 0 5px;
    }
  }
}
</style>
